<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>专家平台</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <!-- 添加Markmap相关库 -->
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.15.3/dist/browser/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.3/dist/browser/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            flex-direction: column;
            padding: 20px;
            min-height: calc(100vh - 64px); /* 添加最小高度 */
            height: auto; /* 允许自动增长 */
            gap: 20px;
            margin-top: 0; /* 确保从顶部开始 */
            position: relative;
        }

        /* 消息容器基础样式 */
        .messages-container {
            display: none;
            height: calc(100vh - 64px);
            gap: 20px;
            padding: 20px;
            background: #f0f2f5;
            overflow: hidden;
        }

        /* 初始显示需求广场 */
        .container:first-child {
            display: flex;
        }

        .messages-container .left-nav {
            flex: 0 0 280px;
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            height: calc(100vh - 104px);
            overflow-y: auto;
        }

        .messages-container .right-content {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            height: calc(100vh - 104px);
            overflow: hidden;
        }

        .messages-container .demand-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .messages-container .demand-header {
            padding: 20px;
            background: #f8fafc;
            border-bottom: 1px solid #e5e9ef;
        }

        .messages-container .demand-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .messages-container .comments-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .messages-container .comments-scroll-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            padding: 0 20px;
            max-height: calc(100vh - 250px);
        }

        .message-list {
            padding-bottom: 20px;
            transform: translateZ(0);
        }

        /* 优化滚动条样式 */
        .comments-scroll-container::-webkit-scrollbar {
            width: 8px;
        }

        .comments-scroll-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .comments-scroll-container::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* 优化左侧需求列表样式 */
        .messages-container .demand-item {
            padding: 12px 16px;
            margin-bottom: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            background: #f8f9fa;
        }

        .messages-container .demand-item:hover {
            background: #e6f7ff;
        }

        .messages-container .demand-item.active {
            background: #e6f7ff;
            color: #1890ff;
            font-weight: 500;
        }

        .messages-container .unread-badge {
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            background: #ff4d4f;
            color: white;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
            min-width: 20px;
            text-align: center;
        }

        .messages-container .message-item {
            margin-bottom: 24px;
            max-width: 80%;
            position: relative;
        }

        .messages-container .expert-message {
            margin-left: auto;
            background: #e6f7ff;
            border-radius: 12px 2px 12px 12px;
            padding: 12px 16px;
        }

        .messages-container .user-message {
            margin-right: auto;
            background: #f6ffed;
            border-radius: 2px 12px 12px 12px;
            padding: 12px 16px;
        }

        .messages-container .message-item .sender {
            font-size: 13px;
            margin-bottom: 4px;
        }

        .messages-container .expert-message .sender {
            color: #1890ff;
            text-align: right;
        }

        .messages-container .user-message .sender {
            color: #52c41a;
        }

        .messages-container .message-item .content {
            font-size: 14px;
            line-height: 1.6;
            word-break: break-word;
        }

        .messages-container .message-item .time {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
            text-align: right;
        }

        .messages-container .reply-box {
            padding: 20px;
            background: #fff;
            border-top: 1px solid #f0f0f0;
            margin-top: auto;
        }

        .messages-container .reply-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            resize: none;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .messages-container .confirm-btn {
            float: right;
            padding: 8px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .messages-container .confirm-btn:hover {
            background: #40a9ff;
        }

        .messages-container .demand-item {
            padding: 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            margin-bottom: 8px;
            background: #fafafa;
        }

        .messages-container .demand-item:hover {
            background: #e6f7ff;
        }

        .messages-container .demand-item.active {
            background: #e6f7ff;
            color: #1890ff;
            font-weight: 500;
        }

        .messages-container .unread-badge {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            background: #ff4d4f;
            color: white;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
            min-width: 20px;
            text-align: center;
        }

        /* 添加滚动条样式 */
        .messages-container .left-nav::-webkit-scrollbar,
        .messages-container .message-list::-webkit-scrollbar {
            width: 6px;
        }

        .messages-container .left-nav::-webkit-scrollbar-thumb,
        .messages-container .message-list::-webkit-scrollbar-thumb {
            background: #d9d9d9;
            border-radius: 3px;
        }

        .messages-container .left-nav::-webkit-scrollbar-track,
        .messages-container .message-list::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 3px;
        }

        .top-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            flex: 1;
            min-height: 0; /* 重置最小高度 */
            height: calc(100vh - 400px); /* 设置合适的高度 */
        }

        .mind-map,
        .description {
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 100%; /* 填充父容器 */
            display: flex;
            flex-direction: column;
        }

        .description-text {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            border: none;
            resize: none;
            font-size: 14px;
            line-height: 1.6;
        }

        .middle-area {
            height: 60px;
            position: relative;
            margin: 12px 0;
        }

        .create-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            padding: 12px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }

        .create-btn:hover {
            background: #40a9ff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
        }

        .bottom-section {
            height: 200px;
            margin: 0;
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .input-demand {
            width: 100%;
            height: 100%;
            border: none;
            resize: none;
            font-size: 14px;
            line-height: 1.5;
            padding: 8px;
        }

        .upload-btn {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: #f5f5f5;
            border: 1px solid #d9d9d9;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .upload-btn:hover {
            background: #1890ff;
            color: white;
            border-color: #1890ff;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 100;
        }

        .nav-left {
            display: flex;
            gap: 36px;
        }

        .nav-item {
            cursor: pointer;
            color: #666;
            padding: 8px 12px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .nav-item.active {
            background: #1890ff;
            color: white;
        }

        .nav-item:hover {
            color: #1890ff;
        }

        .nav-item.active:hover {
            background: #40a9ff;
            color: white;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            cursor: pointer;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #1890ff;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: inline-block;
            margin-left: 10px;
        }

        .avatar.has-image {
            background-color: transparent;
        }

        .user-dropdown {
            display: none;
            position: absolute;
            top: 50px;
            right: 0;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 16px;
            z-index: 200;
            width: 300px;
        }

        .user-dropdown div {
            margin-bottom: 8px;
        }

        .user-dropdown button {
            width: 100%;
            padding: 8px 16px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 8px;
        }

        .user-dropdown button:hover {
            background: #40a9ff;
        }

        .upload-avatar {
            text-align: center;
            margin-top: 8px;
        }

        .upload-avatar img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-bottom: 8px;
        }

        .upload-avatar a {
            color: #1890ff;
            cursor: pointer;
            text-decoration: none;
        }

        .upload-avatar a:hover {
            text-decoration: underline;
        }

        .change-password-container {
            display: none;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 300;
        }

        .change-password-form {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            width: 340px;
        }

        .change-password-form div {
            margin-bottom: 16px;
        }

        .change-password-form input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .change-password-form button {
            width: 100%;
            padding: 10px 16px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 8px;
            font-size: 14px;
        }

        .change-password-form button:hover {
            background: #40a9ff;
        }

        .verification-container {
            display: flex;
            align-items: center;
        }

        .verification-container input {
            flex: 1;
            margin-right: 8px;
        }

        .verification-container button {
            width: auto;
            padding: 10px;
            white-space: nowrap;
        }
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f0f2f5;
        }

        /* 需求广场网格布局 */
        .demand-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
            padding: 0;
            margin: 0;
            min-height: auto; /* 移除最小高度限制，让它自适应内容 */
            will-change: transform;
            contain: layout style paint;
        }

        /* 需求方块样式 */
        .demand-square {
            position: relative;
            aspect-ratio: 3/4;
            background: #fff;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            will-change: transform; /* 优化悬停动画 */
            contain: content; /* 优化渲染 */
        }

        .demand-square:hover {
            transform: translateY(-4px);
        }

        .demand-title {
            font-size: 14px; /* 稍微减小字体大小 */
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .demand-description {
            font-size: 12px; /* 减小描述文字大小 */
            color: #666;
            flex-grow: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .demand-status {
            font-size: 12px;
            color: #1890ff;
            margin-top: 6px;
        }

        .demand-creator {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }

        /* 预览按钮 */
        .preview-btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            padding: 6px 12px;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .preview-btn:hover {
            background: #1890ff;
            color: white;
            border-color: #1890ff;
        }

        /* 需求详情页 */
        .demand-detail {
            display: flex;
            flex-direction: column;
            gap: 20px;
            height: calc(100vh - 104px);
            margin: 0; /* 重置所有外边距 */
            padding: 20px; /* 添加内边距 */
            position: absolute; /* 使用绝对定位 */
            top: 64px; /* 从导航栏下方开始 */
            left: 0;
            right: 0;
            background: #f0f2f5;
        }

        /* 按钮容器样式 */
        .button-group {
            margin-top: 20px;
            display: flex;
            gap: 16px;
            justify-content: flex-end;
            padding: 0 20px;
        }

        /* 提交按钮样式 */
        .submit-btn {
            padding: 12px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .submit-btn:hover {
            background: #40a9ff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
        }

        /* 调整返回按钮样式 */
        .return-btn {
            padding: 12px 24px;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0; /* 移除原有margin */
        }
        .return-btn:hover {
            background: #1890ff;
            color: white;
            border-color: #1890ff;
        }

        /* 文本输入区域调整 */
        .bottom-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .input-demand {
            min-height: 100px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            resize: vertical;
        }

        /* 消息界面新增样式 */
        .messages-container .left-nav .demand-item {
            padding: 8px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #eee;
        }
        .messages-container .left-nav .demand-item:hover {
            background: #e9ecef;
        }
        .messages-container .left-nav .demand-item.active {
            background: #f0f7ff;
            color: #1890ff;
            font-weight: 500;
        }
        .messages-container .right-content .demand-details {
            padding: 16px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 16px;
        }
        .messages-container .right-content .demand-name {
            color: #333;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .messages-container .right-content .user-name {
            color: #666;
            margin-bottom: 8px;
        }
        .messages-container .right-content .reply {
            color: #666;
            margin-bottom: 12px;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .messages-container .right-content .reply-box {
            margin-top: 8px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 4px;
            display: none;
        }
        .messages-container .right-content .reply-textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 80px;
            resize: vertical;
            margin-bottom: 8px;
        }
        .messages-container .right-content .confirm-btn {
            padding: 6px 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            float: right;
        }
        .messages-container .right-content .confirm-btn:hover {
            background: #40a9ff;
        }
        .messages-container .right-content .message-list {
            max-height: calc(100% - 120px);
            overflow-y: auto;
            padding-right: 8px;
        }
        .messages-container .right-content .message-item {
            margin-bottom: 12px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .messages-container .right-content .message-item .sender {
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .messages-container .right-content .message-item .content {
            color: #666;
        }
        .messages-container .right-content .message-item .time {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
            text-align: right;
        }

        /* 添加分页按钮样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 16px 0;
            position: sticky;
            bottom: 0;
            background: #f0f2f5;
            z-index: 100;
        }

        .page-btn {
            padding: 8px 16px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .page-btn:hover:not(:disabled) {
            background: #40a9ff;
        }

        .page-btn:disabled {
            background: #d9d9d9;
            cursor: not-allowed;
        }

        #page-info {
            margin: 0 20px;
            color: #666;
        }

        /* 添加加载状态样式 */
        .loading-skeleton {
            background: linear-gradient(
                    90deg,
                    #f0f0f0 25%,
                    #e0e0e0 50%,
                    #f0f0f0 75%
            );
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* 添加空白卡片的样式 */
        .demand-square.empty {
            background: transparent;
            box-shadow: none;
            pointer-events: none;
        }

        /* 确保每行6个的布局 */
        @media (max-width: 1400px) {
            .demand-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        /* 更新消息列表样式，使其更像抖音评论区 */
        .message-list {
            max-height: calc(100vh - 250px);
            overflow-y: auto;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .message-item {
            margin-bottom: 16px;
            padding: 12px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .message-item .sender {
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .message-item .content {
            color: #666;
            line-height: 1.5;
            word-break: break-word;
        }

        .message-item .time {
            color: #999;
            font-size: 12px;
            margin-top: 8px;
            text-align: right;
        }

        .reply-box {
            padding: 16px;
            background: #fff;
            border-radius: 8px;
            margin-top: 16px;
        }

        .reply-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: none;
            margin-bottom: 12px;
        }

        .confirm-btn {
            float: right;
            padding: 8px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .confirm-btn:hover {
            background: #40a9ff;
        }

        .left-nav .demand-item {
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 1px solid #eee;
            position: relative;
        }

        .left-nav .demand-item:hover {
            background: #e6f7ff;
            color: #1890ff;
        }

        .left-nav .demand-item.active {
            background: #e6f7ff;
            color: #1890ff;
            font-weight: 500;
        }

        .left-nav .demand-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #1890ff;
        }

        .message-item {
            margin-bottom: 16px;
            padding: 16px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .message-item .sender {
            font-weight: 500;
            color: #1890ff;
            margin-bottom: 8px;
        }

        .message-item .content {
            color: #333;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .message-item .time {
            color: #999;
            font-size: 12px;
            text-align: right;
        }

        /* 添加回复消息的功能 */
        .confirm-btn {
            float: right;
            padding: 8px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .confirm-btn:hover {
            background: #40a9ff;
        }

        /* 添加样式 */
        .message-item {
            margin-bottom: 16px;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            max-width: 80%;
        }

        .expert-message {
            background: #e6f7ff;
            margin-left: auto;
            border-top-right-radius: 0;
        }

        .user-message {
            background: #f6ffed;
            margin-right: auto;
            border-top-left-radius: 0;
        }

        .expert-message .sender {
            color: #1890ff;
            text-align: right;
        }

        .user-message .sender {
            color: #52c41a;
        }

        .message-item .content {
            margin: 8px 0;
            word-break: break-word;
        }

        .message-item .time {
            color: #999;
            font-size: 12px;
            text-align: right;
        }

        /* 添加空状态样式 */
        .no-demands {
            text-align: center;
            color: #999;
            padding: 20px;
            font-size: 14px;
        }

        /* 添加通知框样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 16px 24px;
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 1000;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateX(0);
        }

        .notification .icon {
            color: #52c41a;
            font-size: 20px;
        }

        .notification .message {
            color: #52c41a;
            font-size: 14px;
            font-weight: 500;
        }

        .notification.error {
            background: #fff2f0;
            border-color: #ffccc7;
        }

        .notification.error .icon,
        .notification.error .message {
            color: #ff4d4f;
        }

        /* 添加新的评论区样式 */
        .comments-section {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
        }

        .comment-count {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }

        .comment-item {
            display: flex;
            margin-bottom: 20px;
            padding: 12px 0;
        }

        .comment-avatar {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .comment-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .comment-content {
            flex: 1;
        }

        .comment-user {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .comment-text {
            color: #333;
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .comment-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 8px;
        }

        .comment-time {
            color: #999;
            font-size: 12px;
        }

        .reply-button {
            background: none;
            border: none;
            color: #1890ff;
            cursor: pointer;
            font-size: 14px;
        }

        .reply-button:hover {
            color: #40a9ff;
        }

        .replies-preview {
            margin-left: 20px;
            border-left: 2px solid #f0f0f0;
            padding-left: 12px;
        }

        .replies-count {
            color: #1890ff;
            cursor: pointer;
            font-size: 14px;
            margin: 8px 0;
        }

        .replies-count:hover {
            color: #40a9ff;
        }

        .replies-list {
            margin-top: 12px;
        }

        .reply-item {
            display: flex;
            margin-bottom: 12px;
            padding: 8px 0;
        }

        .reply-box {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .reply-avatar {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        .reply-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .reply-input-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .reply-textarea {
            width: 100%;
            min-height: 60px;
            padding: 12px;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            resize: none;
            font-size: 14px;
        }

        .reply-textarea:focus {
            outline: none;
            border-color: #40a9ff;
        }

        .confirm-btn {
            align-self: flex-end;
            padding: 6px 16px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .confirm-btn:hover {
            background: #40a9ff;
        }

        /* 左侧视频列表样式 */
        .left-nav {
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            width: 300px;
            overflow-y: auto;
        }

        .demand-item {
            display: flex;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 8px;
            background: #f8f9fa;
        }

        .demand-item:hover {
            background: #e6f7ff;
        }

        .demand-item.active {
            background: #e6f7ff;
            border-left: 3px solid #1890ff;
        }

        .demand-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .demand-info {
            color: #666;
            font-size: 14px;
        }

        /* 优化容器样式 */
        .messages-container {
            display: none;
            height: calc(100vh - 64px);
            gap: 20px;
            padding: 20px;
            background: #f0f2f5;
            overflow: hidden;
        }

        .right-content {
            flex: 1;
            display: flex;
            overflow: hidden;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .demand-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        .comments-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .comments-scroll-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            padding: 0 20px;
        }

        .message-list {
            padding-bottom: 20px;
            transform: translateZ(0);
        }

        /* 优化滚动条样式 */
        .comments-scroll-container::-webkit-scrollbar {
            width: 6px;
        }

        .comments-scroll-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        .comments-scroll-container::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* 优化评论项性能 */
        .comment-item {
            contain: content;
            will-change: transform;
            transform: translateZ(0);
        }

        /* 优化头像加载 */
        .comment-avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #f0f0f0;
            will-change: transform;
        }

        /* 优化回复框定位 */
        .reply-box.main-reply {
            position: sticky;
            bottom: 0;
            background: #fff;
            margin: 0;
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            z-index: 1;
        }

        /* 优化动画性能 */
        .replies-list {
            transform: translateZ(0);
            will-change: transform;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .replies-preview {
            contain: content;
        }

        /* 左侧导航优化 */
        .left-nav {
            flex: 0 0 300px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            margin-right: 20px;
            transform: translateZ(0);
        }

        /* 优化需求项性能 */
        .demand-item {
            contain: content;
            will-change: transform;
        }

        /* 优化加载状态 */
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        .loading {
            background: linear-gradient(
                    90deg,
                    #f0f0f0 25%,
                    #e0e0e0 50%,
                    #f0f0f0 75%
            );
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 4px;
        }

        .loading-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .loading-text {
            height: 16px;
            margin: 8px 0;
            width: 100%;
        }

        /* 右侧内容区域颜色优化 */
        .right-content {
            flex: 1;
            display: flex;
            overflow: hidden;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .demand-header {
            background: #f8fafc;
            border-bottom: 1px solid #e5e9ef;
        }

        .comments-section {
            background: #ffffff;
        }

        .comments-scroll-container {
            background: #fafbfc;
        }

        .message-list {
            padding: 20px;
        }

        .comment-item {
            background: #ffffff;
            border: 1px solid #f0f2f5;
            margin-bottom: 16px;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        /* 修改回复框样式 */
        .reply-box.main-reply {
            background: #f8fafc;
            border-top: 1px solid #e5e9ef;
            padding: 16px 20px;
        }

        .reply-input-container {
            width: 100%;
        }

        .reply-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid #e5e9ef;
            border-radius: 8px;
            resize: none;
            font-size: 14px;
            background: #ffffff;
            margin-bottom: 12px;
        }

        .reply-textarea:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }

        .confirm-btn {
            float: right;
            padding: 8px 24px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .confirm-btn:hover {
            background: #40a9ff;
            box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
        }

        /* 需求详情页脑图和描述容器样式 */
        .demand-detail .mind-map,
        .demand-detail .description {
            height: 100%;
            overflow: auto;
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .demand-detail .mindmap-area {
            height: calc(100% - 40px);
            min-height: 300px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fafafa;
            overflow: auto;
        }

        .demand-detail .description-text {
            height: calc(100% - 40px);
            overflow: auto;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fafafa;
        }

        /* 优化滚动条样式 */
        .demand-detail .mind-map::-webkit-scrollbar,
        .demand-detail .description-text::-webkit-scrollbar,
        .demand-detail .mindmap-area::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .demand-detail .mind-map::-webkit-scrollbar-thumb,
        .demand-detail .description-text::-webkit-scrollbar-thumb,
        .demand-detail .mindmap-area::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        .demand-detail .mind-map::-webkit-scrollbar-track,
        .demand-detail .description-text::-webkit-scrollbar-track,
        .demand-detail .mindmap-area::-webkit-scrollbar-track {
            background: transparent;
        }

        .demand-description-content {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .demand-info {
            margin: 15px 0;
            padding: 10px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .demand-info p {
            margin: 8px 0;
            color: #666;
        }

        .demand-info strong {
            color: #333;
            margin-right: 8px;
        }

        #demand-description-view h4 {
            margin: 0;
            padding: 10px 0;
            color: #2196f3;
            border-bottom: 2px solid #e0e0e0;
        }

        #demand-description-view h5 {
            margin: 15px 0 10px;
            color: #333;
        }

        .description-text {
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            max-height: 600px;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.6;
        }

        .description-text pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: inherit;
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: #333;
        }

        /* 移除不需要的样式 */
        .demand-description-content,
        .demand-info,
        #demand-description-view h4,
        #demand-description-view h5 {
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar">
    <div class="nav-left">
        <div class="nav-item active" data-tab="需求广场">需求广场</div>
        <div class="nav-item" data-tab="消息">消息</div>
    </div>
    <div class="user-info">
        <span>专家</span>
        <span id="userEmail" th:text="${userEmail}"></span>
        <div class="avatar"></div>
        <div class="user-dropdown">
            <div>
                手机号/邮箱：
                <span id="user-contact" th:text="${userEmail}"
                >已登录的手机号或邮箱</span
                >
            </div>
            <div class="upload-avatar">
                <input
                        type="file"
                        id="avatarInput"
                        accept="image/*"
                        style="display: none"
                />
                <a href="#" id="uploadAvatarBtn">点击上传头像</a>
            </div>
            <button id="change-password-btn">修改密码</button>
        </div>
    </div>
</nav>

<!-- 需求广场容器 -->
<div class="container">
    <div class="demand-grid">
        <!-- 需求卡片将通过JavaScript动态加载 -->
    </div>

    <!-- 分页控制器 -->
    <div class="pagination-container">
        <button id="prev-page" class="page-btn" disabled>上一页</button>
        <span id="page-info">第 1 页</span>
        <button id="next-page" class="page-btn">下一页</button>
    </div>
</div>

<!-- 需求详情容器 -->
<div class="demand-detail" style="display: none">
    <div class="top-section">
        <div class="mind-map">
            <h3>需求脑图</h3>
            <div id="load-mindmap-container" class="mindmap-area">
                <div class="mindmap-placeholder">
                    请等待需求描述加载完成，将自动生成思维导图
                </div>
            </div>
        </div>
        <div class="description">
            <h3>需求描述</h3>
            <div id="demand-description-view" class="description-text"></div>
        </div>
    </div>
    <div class="bottom-section">
        <textarea class="input-demand" placeholder="输入您的评论"></textarea>
        <div class="button-group">
            <button class="return-btn">返回需求广场</button>
            <button class="submit-btn">提交评论</button>
        </div>
    </div>
</div>

<!-- 消息容器 -->
<div class="messages-container" style="display: none">
    <div class="left-nav">
        <!-- 动态添加需求对话列表（类似视频列表） -->
    </div>
    <div class="right-content">
        <div class="demand-details">
            <div class="demand-header">
                <div class="demand-name"></div>
                <div class="demand-info"></div>
            </div>
            <div class="comments-section">
                <div class="comment-count">
                    评论 <span class="total-comments">0</span>
                </div>
                <div class="comments-scroll-container">
                    <div class="message-list">
                        <!-- 评论模板 -->
                        <div id="comment-template" style="display: none">
                            <div class="comment-item">
                                <div class="comment-avatar">
                                    <img src="/api/user/avatar/image/1" alt="用户头像" />
                                </div>
                                <div class="comment-content">
                                    <div class="comment-user">用户名</div>
                                    <div class="comment-text">评论内容</div>
                                    <div class="comment-actions">
                                        <span class="comment-time">2024-01-01 12:00</span>
                                        <button class="reply-button">回复</button>
                                    </div>
                                    <div class="replies-preview">
                                        <div class="replies-count">查看3条回复</div>
                                        <div class="replies-list" style="display: none"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reply-box main-reply">
                    <div class="reply-input-container">
                <textarea
                        class="reply-textarea"
                        placeholder="写下你的评论..."
                ></textarea>
                        <button class="confirm-btn">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改密码界面 -->
<div class="change-password-container" style="display: none">
    <div class="change-password-form">
        <div>
            <label for="user-contact-display">手机号/邮箱</label>
            <input
                    type="text"
                    id="user-contact-display"
                    disabled
                    value="已登录的手机号或邮箱"
            />
        </div>
        <div class="verification-container">
            <input type="text" id="verification-code" placeholder="验证码" />
            <button id="get-verification-code">获取</button>
        </div>
        <div>
            <input type="password" id="new-password" placeholder="新密码" />
        </div>
        <div>
            <input
                    type="password"
                    id="confirm-password"
                    placeholder="确认新密码"
            />
        </div>
        <div>
            <button id="confirm-change-password">确认修改</button>
        </div>
        <div>
            <button id="return-to-user-info">返回</button>
        </div>
    </div>
</div>

<!-- 添加通知框HTML -->
<div class="notification">
    <span class="icon">✓</span>
    <span class="message"></span>
</div>

<!-- 正确引入JavaScript文件 -->
<script th:inline="javascript">
    // 获取Thymeleaf变量
    const userId = /*[[${userId}]]*/ null;
    const userEmail = /*[[${userEmail}]]*/ null;
</script>
<script src="/test/expert.js"></script>
<script>
    // 修复头像加载问题
    function handleAvatarError(img) {
        img.onerror = null; // 防止循环调用
        img.src =
            "https://java-ai-firstly.oss-cn-beijing.aliyuncs.com/avatars/default-avatar.png"; // 设置默认头像
    }
</script>
</body>
</html>
